﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PokeMonster</title>
    <style>
        html, body{
            overflow: hidden;
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            border:0;
        }
    </style>
    <script src="js/ImageManager.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/world.js"></script>
    <script src="js/Human.js"></script>
    <script src="js/MapRenderer.js"></script>
    <script src="js/Animator.js"></script>
    <script src="js/WorldObject.js"></script>
    <script src="js/Fighting.js"></script>
    <script src="js/KeyEventHandle.js"></script>

    <script type="text/javascript">
        var canvas;
        var ctx;
        var imageManager;
        var mapRenderer;
        var spriteSheet;
        var worldObject;
        var fight;

        var obj = [];
        var id = 0;
        var speed = 16;
        var moveX = 0;
        var moveY = 0;

        var now;
        var frame = 0;
        var numFrames = 4;
        var duration = numFrames * 500;
        var frameStart = 0;
        var currentFrame = 0;
        var isMoving = true;

        var images = {
            "house" : "img/house.png",
            "outside" : "img/outside.png",
            "outside2" : "img/outside2.png",
            "man" : "img/RM.png",
            "me" : "img/1/3Gback.png",
            "enemy" : "img/4/front.png",
            "HP" : "img/HP.png",
            "select1" :"img/select1.png",
            "select2" :"img/select2.png",
            "select3" :"img/select3.png",
            "select4" :"img/select4.png",
        };
        function init(){
            imageManager = new ImageManager();
            imageManager.load(images, onLoaded);

            canvas = initFullScreenCanvas("mainCanvas");
            ctx = canvas.getContext("2d");

            /*
             Left Arrow 	37
             Up Arrow 	38
             Right Arrow 	39
             Dw Arrow 	40
             */
           // window.addEventListener("keypress",keyDown, false);
            document.body.onkeydown = KeyDown;
        }

        //图像加载完后回调;
        function onLoaded(){

            mapRenderer = new MapRenderer(world, imageManager.get("house"),32,canvas.width,canvas.height);
            spriteSheet = new SpriteSheet(imageManager.get("man"), Human);
            spriteSheet.drawFrame(ctx, 0,0, window.screen.width/2 ,window.screen.height/2);
            initObj(); //初始化世界对象数组.

            animate(0);
        }

        function animate(t){
            clear();
            if (isMoving){
                mapRenderer.draw(ctx);

                now = 0 || new Date().getTime();//初始化开始时间;
                var passed = (now - frameStart)%duration;
                var currentFrame = Math.floor((passed/duration)*numFrames);

                spriteSheet.drawFrame(ctx, frame, currentFrame, window.screen.width/2 ,window.screen.height/2);
            }
            else{
                //进入战斗 !isMoving
                fight.draw(ctx);
            }
            requestAnimationFrame(arguments.callee);
        }

        var KeyDown = function(event) {
            event = event || window.event;
            var keyCode = event.keyCode;

            if (isMoving) {
                event = event || window.event;

                if (keyCode == 38) {
                    if (canMove(0, -speed))
                        mapRenderer.move(moveX, speed);
                    frame = 3;
                } else if (keyCode == 40) {
                    if (canMove(0, speed))
                        mapRenderer.move(moveX, -speed);
                    frame = 0;
                } else if (keyCode == 37) {
                    if (canMove(-speed, 0))
                        mapRenderer.move(speed, moveY);
                    frame = 1;
                } else if (keyCode == 39) {
                    if (canMove(speed, 0))
                        mapRenderer.move(-speed, moveY);
                    frame = 2;
                }
                ;
            }
            else {
                if (keyCode == 32) {
                    switch (fight.getState()){
                        case 1 : alert("You hit it!");
                            fight._reduceHP(2 , Math.floor(Math.random()*20));
                                alert("You were attacked.");
                            fight._reduceHP(1 , Math.floor(Math.random()*10));
                                if(fight._getHP()) isMoving = !isMoving;
                            break;
                        case 2 : alert("You opened BAG.");break;
                        case 3 : alert("You choosed PM?");break;
                        case 4 : if(Math.random() < 0.6){
                            alert("逃跑失败!");
                            fight._reduceHP(1 , Math.floor(Math.random()*10));
                        }
                            else {
                            alert("逃跑成功!");
                            isMoving = !isMoving;
                        }
                    }
                }

                if (keyCode == 38) {
                    switch (fight.getState()) {
                        case 1 :
                        case 2:
                            return;
                            break;
                        case 3 :
                            fight.setState(1);
                            break;
                        case 4 :
                            fight.setState(2);
                            break;
                    }
                } else if (keyCode == 40) {
                    switch (fight.getState()) {
                        case 1 :
                            fight.setState(3);
                            break;
                        case 2 :
                            fight.setState(4);
                            break;
                        case 3 :
                        case 4 :
                            return;
                            break;
                    }
                } else if (keyCode == 37) {
                    switch (fight.getState()) {
                        case 1 :
                            return;
                            break;
                        case 2 :
                            fight.setState(1);
                            break;
                        case 3 :
                            return;
                            break;
                        case 4 :
                            fight.setState(3);
                            break;
                    }
                } else if (keyCode == 39) {
                    switch (fight.getState()) {
                        case 1 :
                            fight.setState(2);
                            break;
                        case 2 :
                            return;
                            break;
                        case 3 :
                            fight.setState(4);
                            break;
                        case 4 :
                            return;
                            break;
                    }
                }
            }
        };
        function initObj(){
            for(var y = 0; y<world.length ;y++){
                for(var x = 0; x<world[y].length;x++){
                    var tileId = world[y][x]-1;

                    if((tileId <=10 && tileId >=0 )|| (tileId >13 && tileId <20) || (tileId >23 && tileId <30))
                        continue;
                    else {
                        var wo = new WorldObject(id , x*32 ,y*32);
                        obj.push(wo);
                        // console.log(tileId + "," +obj[id]._x +","+ obj[id]._y);
                        id++;
                    }

                }
            };

        }
        function canMove(x, y){
            var px = Math.floor((-mapRenderer._x + window.screen.width/2 +x) / 32);
            var py = Math.floor((-mapRenderer._y + window.screen.height/2+y)/ 32);
            var tileID = world[py][px] -1;
            //.log(x +","+y+"||"+tileID);
            if ((tileID > -1 && tileID < 11) || (tileID > 13 && tileID < 20) || (tileID > 23 && tileID < 30))
            {
                if(tileID == 10){
                    //遇到PM
                    if(Math.random() < 0.1) {
                        isMoving = !isMoving;
                        fight = new Fighting(imageManager);
                    }
                }
                return true;
            }
            return false;
        }
        function clear(){
            //填充画布
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width , canvas.height);
        }
        function  initFullScreenCanvas(canvasId){
            var canvas = document.getElementById(canvasId);
            resizeCanvas(canvas);
            window.addEventListener("resize" , function () {
                resizeCanvas(canvas);
            });
            return canvas;
        }
        function resizeCanvas(canvas){
            canvas.width = document.width || document.body.clientWidth;
            canvas.height = document.height || document.body.clientHeight;
            fight && fight.resetView(canvas.width , canvas.height);
            mapRenderer && mapRenderer.setViewportSize(canvas.width , canvas.height);
        }

    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" width="400" height="300" ></canvas>
</body>
</html>